<template>
  <el-menu class="categories" default-active="0" active-text-color="red" @select="handleSelect">

    <el-radio-group v-model="isCollapse" style="margin-top: 20px;">
      <el-radio-button :label="true">新品</el-radio-button>
      <el-radio-button :label="false">二手</el-radio-button>
    </el-radio-group>
    <el-menu-item index="0">
      <i class="el-icon-menu"></i>
      <span slot="title">全部</span>
    </el-menu-item>
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">文学</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">流行</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-menu"></i>
      <span slot="title">文化</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-menu"></i>
      <span slot="title">生活</span>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-menu"></i>
      <span slot="title">经管</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-menu"></i>
      <span slot="title">科技</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
  export default {
    name: 'SideMenu',
     data() {
          return {
            isCollapse: true,
             cid: ''
          };
        },
        methods: {
          handleSelect (key, keyPath) {
            this.cid = key
            this.$emit('indexSelect')
          }
        }
  };
</script>

<style scoped>
  .categories {
    position: fixed;
    /* margin-left: 50%; */
    /* left: -700px; */
    /* top: 10%; */
    margin-top: 2%;
    margin-left: 4%;
    width: 150px;
  }
</style>
